
<!-- 近期任务 -->

<template>
  <div class="task">
    <div class="task-title">
      <div class="task-title-left">
        <div class="logo"></div>
        近期任务
      </div>
      <div class="task-title-right">
        <!-- <el-dropdown
          size="mini"
          split-button
          @command="changeItem"
        >
          {{ currentChange }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="第1周">第1周</el-dropdown-item>
            <el-dropdown-item command="第2周">第2周</el-dropdown-item>
            <el-dropdown-item command="第3周">第3周</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
    </div>
    <div class="task-content">
      <div class="task-content-top">
        <el-carousel
          height="0.94rem"
          :autoplay="false"
          indicator-position="none"
        >
          <el-carousel-item v-for="(item, i) in dateArr" :key="i">
            <div class="box">
              <div
                class="box-item"
                v-for="(val, j) in item"
                :key="j"
                :style="{
                  boxShadow: val.flag ? '0 0 0.02rem 0.02rem rgb(255, 0, 0)' : '' ,
                }"
                @click="clickTate(i, j)"
              >
                <div
                  class="box-item-top"
                  :style="{
                    color: val.flag ? 'red' : '',
                    fontSize: val.flag ? '16px' : '',
                    fontWeight: val.flag ? '600' : '',
                  }"
                >
                  {{ val.flag ? "今" : val.week }}
                </div>
                <div
                  class="box-item-bottom"
                  :style="{
                    color: val.flag ? 'red' : '',
                    fontSize: val.flag ? '14px' : '',
                    fontWeight: val.flag ? '600' : '',
                  }"
                >
                  {{ val.day }}
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="task-content-bottom">
        <el-carousel
          height="1.23rem"
          :autoplay="true"
          indicator-position="none"
        >
          <el-carousel-item v-for="(item, i) in 3" :key="i">
            <div class="box">
              <div class="box-item" v-for="(val, j) in 2" :key="j">
                <div class="box-item-left">
                  <img src="@/assets/icons/紧急.png" alt="" />
                </div>
                <div class="box-item-right">
                  <div class="item">
                    <div>委托编号：XYM83270012</div>
                    <!-- <span></span> -->
                  </div>
                  <div class="item">
                    <div>状态：</div>
                    <span>试验执行</span>
                  </div>
                  <div class="item">
                    <div>完成日期：</div>
                    <span>2022-10-01</span>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Carousel,
  CarouselItem,
} from "element-ui";
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Carousel);
Vue.use(CarouselItem);

export default {
  data() {
    return {
      //   currentChange: "第1周", //当前选中项
      dateArr: [
        [
          { week: "一", day: "10/01", flag: false },
          { week: "二", day: "10/02", flag: false },
          { week: "三", day: "10/03", flag: false },
          { week: "四", day: "10/04", flag: false },
          { week: "五", day: "10/05", flag: false },
          { week: "六", day: "10/06", flag: false },
          { week: "七", day: "10/07", flag: false },
        ],
        [
          { week: "一", day: "10/08", flag: false },
          { week: "二", day: "10/09", flag: false },
          { week: "三", day: "10/10", flag: false },
          { week: "四", day: "10/12", flag: false },
          { week: "五", day: "10/13", flag: false },
          { week: "六", day: "10/14", flag: false },
          { week: "七", day: "10/15", flag: false },
        ],
      ],
    };
  },
  methods: {
    // 点击日期
    clickTate(i, j) {
      console.log(i);
      console.log(j);
      this.dateArr = this.dateArr.map((item, index) => {
        item = item.map((val, subIndex) => {
          if (i == index && j == subIndex) {
            val.flag = true;
          } else {
            val.flag = false;
          }

          return val;
        });
        // console.log(arr);
        return item;
      });
      //   this.dateArr = [...arr];
        console.log(this.dateArr);
      //   this.dateArr[i][j].week = "今";
    },
    // // 下拉选中
    // changeItem(e) {
    //   console.log("选中的下拉项：", e);
    //   this.currentChange = e;
    // },
  },
  mounted() {},
  created() {},
};
</script>

<style lang='scss' scoped>
.task {
  height: 100%;
  padding: 0 0.1rem;
  &-title {
    height: 0.45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      display: flex;
      align-items: center;
      font-size: 0.14rem;
      font-weight: bold;
      .logo {
        width: 0.1rem;
        height: 0.3rem;
        background-color: rgb(209, 46, 46);
        margin-right: 0.1rem;
      }
    }
  }
  &-content {
    height: calc(100% - 0.55rem);
    display: flex;
    flex-direction: column;
    &-top {
      height: 0;
      flex: 1;
      margin: 0.1rem 0;
      .box {
        height: 100%;
        padding: 0 0.2rem;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        box-shadow: 0 0 0.1rem 0.1rem rgb(255, 0, 0);
        border-radius: 0.1rem;
        &-item {
          cursor: pointer;
          flex: 1;
          padding: 0.15rem 0;
          height: 80%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 0 0.08rem;
          border-radius: 0.15rem;
          &:hover {
            box-shadow: 0 0 1px 1px rgba(13, 224, 84, 0.5);
          }
          &-top {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          &-bottom {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
      }
    }
    &-bottom {
      height: 0;
      margin: 0.08rem 0;
      flex: 1.3;
      .box {
        height: 100%;
        display: flex;
        align-items: center;
        box-shadow: 0 0 0.1rem 0.1rem rgb(255, 0, 0);
        border-radius: 0.1rem;
        &-item {
          cursor: pointer;
          flex: 1;
          max-width: 50%;
          height: 90%;
          margin: 0 0.08rem;
          border-radius: 0.1rem;
          background-color: #e6ffef;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &-left {
            flex: 1;
            width: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            & > img {
              width: 60%;
            }
          }
          &-right {
            flex: 3.5;
            width: 0;
            .item {
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>